<template>
  <view class="broadband-fault-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="宽带报障" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 本机号码 -->
      <view class="phone-info">
        <text class="phone-label">本机号码:{{ phoneNumber }}</text>
      </view>
      
      <!-- 故障指示器 -->
      <view class="fault-indicator">
        <view class="fault-box">
          <view class="wifi-icon-wrapper">
            <image class="wifi-icon" src="/static/images/wifi-bg.png" mode="aspectFit" />
          </view>
        </view>
      </view>
      
      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="btn-primary" @click="handleThisDevice">本机报障</button>
        <button class="btn-secondary" @click="handleOtherDevice">非本机报障</button>
      </view>
      
      <!-- 温馨提示 -->
      <view class="tips-section">
        <view class="tips-header">
          <view class="tips-line"></view>
          <text class="tips-title">温馨提示</text>
        </view>
        <view class="tips-content">
          <text class="tip-item">1、本机报障为公众号绑定号码下的宽带账号报故障。</text>
          <text class="tip-item">2、非本机报障为手动填写宽带账号报故障。</text>
          <text class="tip-item">3、忘记宽带账号可选择【非本机报障-忘记账号】使用身份证号报宽带故障。</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import CustomNavbar from '@/components/CustomNavbar.vue'

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
})

const handleThisDevice = () => {
  // 跳转到本机报障页面
  uni.navigateTo({
    url: '/pages/broadband-fault/this-device'
  })
}

const handleOtherDevice = () => {
  // 跳转到非本机报障页面
  uni.navigateTo({
    url: '/pages/broadband-fault/other-device'
  })
}
</script>

<style scoped>
.broadband-fault-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* backdrop-filter: blur(40rpx); */
background: rgba(255, 255, 255, 0.4);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* 本机号码 */
.phone-info {
  margin-top: 40rpx;
  margin-bottom: 60rpx;
}

.phone-label {
  color: rgba(255, 255, 255, 1);
font-family: HarmonyOS Sans SC;
font-size: 32rpx;
font-weight: 700;
line-height: 38rpx;
}

/* 故障指示器 */
.fault-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80rpx;
}

.fault-box {
  width: 280rpx;
  height: 280rpx;
  /* border: 2rpx dashed rgba(255, 255, 255, 0.6); */
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.wifi-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wifi-icon {
  width: 280rpx;
  height: 280rpx;
  /* opacity: 0.6; */
}

.x-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 59, 48, 1);
  font-size: 100rpx;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  z-index: 10;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
    gap: 24rpx;
    /* margin-bottom: 60rpx; */
    padding: 0 60rpx;
}

.btn-primary,
.btn-secondary {
  flex: 1;
  height: 64rpx;
  border-radius: 80rpx;
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 64rpx;
  text-align: center;
  border: none;
}

.btn-primary {
  background: rgba(78, 138, 254, 1);
  color: rgba(255, 255, 255, 1);
}

.btn-secondary {
  background: rgba(255, 255, 255, 1);
  color: rgba(78, 138, 254, 1);
  border: 2rpx solid rgba(78, 138, 254, 1);
}

/* 温馨提示 */
.tips-section {
  /* background: rgba(255, 255, 255, 0.9); */
  border-radius: 16rpx;
  padding: 32rpx;
  backdrop-filter: blur(10rpx);
  -webkit-backdrop-filter: blur(10rpx);
}

.tips-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.tips-line {
  width: 8rpx;
  height: 40rpx;
  background: rgba(78, 138, 254, 1);
  border-radius: 4rpx;
  margin-right: 16rpx;
}

.tips-title {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.tip-item {
  color: rgba(153, 153, 153, 1);
font-family: HarmonyOS Sans SC;
font-size: 24rpx;
font-weight: 400;
line-height: 28rpx;
}
</style>
